<template>
    <div v-loading="loading">
        <el-dialog :visible.sync="visible" title="文件分组" width="800px">
            <el-form :model="form">
                <el-form-item label="分组名">
                    <el-input placeholder="请输入分组名" style="width: 500px" v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="分组标识">
                    <el-input placeholder="请输入分组标识" style="width: 472px" v-model="form.mask"></el-input>
                </el-form-item>

            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button @click="submit" type="primary">确 定</el-button>
            </div>
        </el-dialog>
        <el-button @click="toForm()" size="small" style="width: 150px" type="success">添加</el-button>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="tableData" max-height="440px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="分组名" prop="name"></el-table-column>
                <el-table-column label="分组标识" prop="mask"></el-table-column>
                <el-table-column label="添加时间" prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="toForm(scope.row)" size="mini" type="primary"
                            style="padding: 10px">修改</el-button>
                        <el-popconfirm @confirm="del(scope.row.id)" title="这是一段内容确定删除吗？">
                            <el-button size="mini" slot="reference" type="danger" style="padding: 10px">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
      
<script>
export default {
    data() {
        return {
            form: {
                name: '',
                mask:''
            },
            visible: false,
            loading: false,
            data: [],
            disable: true,
            page: 1,
            moreBut: false,
            tableData: [],
            type: 'create',
            worksId: '',
         
       
        }
    },
    mounted() {
        this.getFileGroupList()

    },
    methods: {

        getFileGroupList() {
            let that = this
            this.$request.get('/file-group/index').then((res) => {
                that.tableData = res
            })
        },
      

        del(id) {
            this.$request.del('/file-group/delete/' + id).then((res) => {
                this.$message.success('删除成功')
                this.getFileGroupList() //重新请求数据
             
            })
        },

        toForm(form = null) {
            this.visible = true //打开弹出框
            if (form != null) {
                this.type = 'update'
                this.worksId = form.id
                this.form = form
            } else {
                this.type = 'create'
                this.worksId = ""
                this.form = {
                    name: '',
                    mask:''
                }
            }
        },

        closeBox() {
            this.type = 'create'
            this.visible = false
            this.form = {
                name: '',
                mask:''
            }
        },


        //提交
        submit() {
            if (!(this.form.name && this.form.mask)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning'
                });
                return
            }
            if (this.type == 'create') {
                this.$request.post('/file-group/create', this.form).then((res) => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });

                    this.getFileGroupList() //重新请求数据
                    this.closeBox()

                })
            } else {
                this.$request.put('/file-group/update/' + this.worksId, this.form).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.getFileGroupList() //重新请求数据
                    this.closeBox()


                })
            }
        },
    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}
</style>